<template>
  <div class="right">
    <p>近期最受期待</p>
    <van-grid>
      <van-grid-item
        icon="https://p1.meituan.net/170.230/moviemachine/a448ca6a5f4dafb88067722303ca0cfd96002.jpg"
        text="姜子牙"
      />
      <van-grid-item
        icon="https://p0.meituan.net/movie/cdb164c203fc0c2465278ddd165e91c84503798.jpg@300w_414h"
        text="夺冠"
      />
      <van-grid-item
        icon="https://p0.meituan.net/170.230/movie/374f7addeb978a634b0f5e8665f0bce4357962.jpg"
        text="我和我的"
      />
      <van-grid-item
        icon="https://p0.meituan.net/170.230/moviemachine/40d1e5ac176f1e9258da10a3222dbff7952117.png"
        text="遇见"
      />
    </van-grid>
    <div class="item" v-for="item in haopinglist" :key="item.id">
      <div class="left">
        <img :src="item.img_path" />
      </div>
      <div class="middle">
        <div>你好世界</div>-->
        <!-- <div>{{ item.name }}</div> -->
       
        <div>
          <span>观众评分</span>
          <span>7.6</span>
        </div>-->
        <!-- <div>主演：{{ item.actors | actorsFilter }}</div> -->
        <div>美国，英国 | 150分钟</div>
      </div>
      <div class="right">
        <span>购票</span>
      </div>
    </div>
  </div>
      
      </template>
      <script>
    import Vue from "vue";
     import { Grid, GridItem } from "vant";
      import { mapState } from "vuex";
    Vue.use(Grid);
Vue.use(GridItem);
export default {
  async mounted() {
    let url = "http://localhost:8080/data/filmlist.json";
    let res = await this.$axios.get(url);
    console.log(res);
    this.$store.dispatch("getStore", res.data);
  },
  computed: {
    ...mapState(["haopinglist"]),
  },
};
</script>  



      <style lang="scss" scopde>
          .right{
              margin-top: 50px;

          }
          .right img{
              width: 80px;
              height: 120px;
          }
          .item {
  margin-top: 5px;
  display: flex;
  color: #797d82;
  font-size: 13px;
  .left {
    width: 30%;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .middle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 55%;
    margin-left: 5px;
    div:nth-of-type(1) {
      color: #191a1b;
      font-size: 16px;
    }
    div:nth-of-type(3) {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .right {
    width: 15%;
    display: flex;
    align-items: center;
    span {
      border: 1px solid #ff5f16;
      background: white;
      color: #ff5f16;
      border-radius: 2px;
      height: 25px;
      line-height: 25px;
      font-size: 13px;
      width: 50px;
      text-align: center;
    }
  }
}
      
       </style>